<template>
	<el-container>
		<el-container>
			<el-main class="nopadding">
				<el-card shadow="never">
					<template v-slot:header>
						<div style="text-align: center;">{{title}}-打印模版设置</div>
					</template>
					<sc-editor v-model="form.htmlTemplate" placeholder="请输入" :height="400"></sc-editor>
				</el-card>
				<el-card shadow="never" header="模版说明" style="margin-top: 20px;">
					<el-descriptions border :column="1">
						<el-descriptions-item>
							<template v-slot:label>
								<div style="width: 80px;">打印模版</div>
							</template>
							由于流程表单处理与打印时所要的表单模版样式与格式要求不一样，所有需要制作相应的HTML模版，表单字段在模版中用右侧Html标签占位,此模版作用于浏览器打印！</el-descriptions-item>
						<el-descriptions-item label="导出模版">由于流程出时需要Word模版，表单字段在模版中用右侧Word标签在文件中占位,若不制作Word模版则流程导出功能不可用！同时Word模版中暂不支持嵌套组件、按钮等非数据组件</el-descriptions-item>
						<el-descriptions-item label="上传模版">
							<sc-upload-file :apiObj="apiObj" v-model="fileList" :limit="1" :data="{module:'doc'}"
											:showFileList="false" @success="addNewFile"
											tip="只能上传一个文件不要超过10M,请上传Word格式文件"
											accept="application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
								<el-button type="primary" icon="el-icon-upload">上传附件</el-button>
							</sc-upload-file>
							<attach-menu v-model:attachIds="form.attachId" :roleFlag="4" :preview="true"></attach-menu>
						</el-descriptions-item>
					</el-descriptions>
					<div style="text-align: center;margin-top: 10px;">
						<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
					</div>
				</el-card>
			</el-main>
		</el-container>
		<el-aside>
			<el-container>
				<el-header style="text-align: center;display: unset;line-height: 40px;font-size: 16px;font-weight: 600;">表单字段</el-header>
				<el-main class="nopadding">
					<el-table ref="table" :data="fieldList" row-key="id">
						<el-table-column label="字段名" prop="label" width="90"></el-table-column>
						<el-table-column label="HTML标签">
							<template #default="scope">
								{{'${'+scope.row.id+'}'}}
							</template>
						</el-table-column>
						<el-table-column label="Word标签">
							<template #default="scope">
								{{'{\{'+(scope.row.elType=='children-data-table'||scope.row.elType=='data-table'?'#':'')+(scope.row.elType=='bar'?'@':'')+(scope.row.elType=='myqrcode'?'@':'')+(scope.row.elType=='sign'?'@':'')+(scope.row.elType=='picture-upload'?'%':'')+scope.row.id+'}\}'}}
							</template>
						</el-table-column>
					</el-table>
				</el-main>
			</el-container>
		</el-aside>
	</el-container>
</template>

<script>
import AttachMenu from '@/views/module/attachMenu'
import { defineAsyncComponent } from 'vue';
const scEditor = defineAsyncComponent(() => import('@/components/scEditor'));
export default {
	name: "editor",
	components: {
		scEditor,
		AttachMenu
	},
	data(){
		return {
			isSaveing:false,
			apiObj:this.$API.file.attach.uploadFile,
			fileList:[],
			fieldList:[],
			title:"",
			form:{
				formId: this.$route.query.formId,
				htmlTemplate: '',
				attachId:'',
			}
		}
	},
	mounted() {
		this.getBpmFormTemplateFormId()
	},
	methods:{
		async submit(){
			this.isSaveing = true;
			var res = await this.$API.bpm.bpmForm.setBpmFormTemplate.post(this.form);
			this.isSaveing = false;
			if (res.code == 200) {
				this.$emit('success')
				this.visible = false;
				this.$message.success("操作成功")
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		async getBpmFormTemplateFormId()
		{
			var res = await this.$API.bpm.bpmForm.getBpmFormTemplateFormId.get({formId:this.form.formId});
			if (res.code === 200) {
				this.title = res.data.formTitle;
				this.form.htmlTemplate = res.data.htmlTemplate;
				let tempArr = JSON.parse(res.data.fieldList);
				tempArr.forEach(item=>{
					if(item.elType!=='data-fill')
					{
						this.fieldList.push(item);
					}
				})
				this.form.attachId = res.data.attachId
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		addNewFile(res, file)
		{
			this.form.attachId = res.data.attachId;
		}
	}
}
</script>
<style scoped>
.box {border-top: 1px solid #eee;border-left: 1px solid #eee;}
.icon-box {height:40px;padding-left: 20px;background: #fff;border-bottom: 1px solid #eee;border-right: 1px solid #eee;color: #666;line-height: 40px;}
.icon-box i {font-size: 26px;transition: color .15s linear;}
.icon-box p {color: #999;margin-top: 15px;transition: color .15s linear;}
.icon-box:hover i, .icon-box:hover p {color: #5cb6ff;}

.dark .box {border-color: var(--el-border-color-light);}
.dark .icon-box {background: var(--el-bg-color-overlay);border-color: var(--el-border-color-light);}
</style>

